<template>
  <div>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="articlesList">
      <el-table-column label="订单编号" align="center" prop="sn" />
      <el-table-column label="手机号" align="center" prop="phoneNumber"/>
      <el-table-column label="订单金额(/元)" align="center" prop="moneyAmount"/>
      <el-table-column label="商品信息" align="center" prop="productName"/>
      <el-table-column label="返现金额(/元)" align="center" prop="agentBankPrice" />
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :showSearch.sync="showSearch"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getData"
    />


  </div>
</template>

<script>
import { bankOrder } from "@/api/system/agent";
import { orderList, ordership, refundOrder } from "@/api/system/order";
import { showLogistics } from "@/api/order/logistics";
import OrderDetail from "../../components/order/orderDetail.vue";
export default {
  data() {
    return {
      openDetail: false,
      // 查询参数
      articlesList: [],
      loading: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id:this.$route.query.param,
      },
      range: [],
      // 开关
      total: 0,
      ids: [],
      formOne: {},
      openDelis: false,
      showSearch: true,
      // 物流公司列表
      companyList: [],
      orderId: "",
      //退款
      openRe: false,
      refundForm: {},
      refundRules: {
        refundMsg: [
          { required: true, message: "请输入退款原因", trigger: "blur" },
        ],
      },
      // 订单发货
      sendRules: {
        company: [
          { required: true, message: "请输入物流公司名称", trigger: "blur" },
        ],
        companyCode: [
          { required: true, message: "请输入物流公司编号", trigger: "blur" },
        ],
        logisticsNumber: [
          { required: true, message: "请输入订单编号", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getData();
  },
  components: {
    OrderDetail,
  },
  computed: {},
  methods: {
    handleQuery() {
      this.queryParams.pageNum = 1;
      const [startTime, endTime] = this.range;
      this.queryParams.startTime = startTime;
      this.queryParams.endTime = endTime;
      this.getData();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.range = [];
      this.queryParams = {
        sn: null,
        status: null,
      };
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getData() {
      bankOrder(this.queryParams).then((res) => {

        this.loading = false;
        this.articlesList = res.data;
      });
    },
    getListLogistics() {
      showLogistics().then((res) => {
        this.companyList = res.data;
      });
    },
    //退款
    handldeRefund(row) {
      const { id } = row;
      this.refundForm = {
        orderId: id,
        refundMsg: null,
      };
      this.openRe = true;
    },
    submitRefundForm() {
      this.$refs["refundFormRef"].validate((valid) => {
        if (valid) {
          refundOrder(this.refundForm).then((res) => {
            this.$modal.msgSuccess("退款成功");
            this.openRe = false;
            this.getData();
          });
        }
      });
    },
    handleExport() {
      const [startTime, endTime] = this.range;
      if (startTime == undefined || endTime == undefined) {
        this.$modal.msgError("请选择开始时间和结束时间");
        return false;
      }
      this.download(
        "/cancel/order/export",
        {
          ...this.queryParams,
          startTime,
          endTime,
        },
        `user_${new Date().getTime()}.xlsx`
      );
      // residentexportOrder(this.queryParams).then((res) => {});
    },

    // 发货
    handldeise(row) {
      this.getListLogistics();
      // console.log(row);
      this.openDelis = true;
      // this.formOne = row;
      const { sn, id } = row;
      this.formOne.orderSn = sn;
      this.formOne.orderId = id;
    },
    //查看详情
    handldetail(row) {
      const { id } = row;
      console.log(id);
      this.orderId = id;
      this.openDetail = true;
    },

    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const company = this.companyList.filter(
            (item) => item.logisticsName == this.formOne.company
          );

          const { logisticsCode, logisticsName } = company[0];
          this.formOne = {
            ...this.formOne,
            company: logisticsName,
            companyCode: logisticsCode,
          };
          ordership(this.formOne).then((response) => {
            this.$modal.msgSuccess("发货成功");
            this.openDelis = false;
            this.formOne = {};
            this.getData();
          });
        }
      });
    },
    cancel() {
      this.openDelis = false;
    },
  },
};
</script>

<style scoped>
/* .mb8 {
  margin-top: 10px;
  padding-left: 15px;
} */
.bnt {
  margin-top: 5px;
}
.images {
  width: 80px;
  height: 80px;
}
.a1 {
  margin: 10px 0 0 15px;
}
.daochu {
  margin-left: 24px;
}
</style>
